<template>
    <div>
        <div class="chart">
            <img src="/image/背景.png" class="back">
            <div  ref="chart" style="width: 1040px; height: 510px"></div>
            <div v-for="(v,k) in chartData" :key="k"  
              class="marker"
              :style="chart?{left:chart.convertToPixel('geo', v.value)[0]+'px',top:chart.convertToPixel('geo', v.value)[1]+'px'}:{}"
            >
                <div :class="['one',v.name==activeMarker?'active':'']" @click="changeMarker(v.name)" >
                    <div class="two">
                        <div class="three">
                            <div class="hreart"></div>
                        </div>
                    </div>
                </div>
                <svg  :class="[v.name==activeMarker?'active':'']" style="position:absolute;left:0; top:-30px; width:100px;height:30px">
                  <line x1="0" y1="30" x2="70" y2="0"  stroke="#fdbd00b3" stroke-width="2" />
                  <line x1="70" y1="0" x2="100" y2="0" stroke="#fdbd00b3" stroke-width="4" />
                </svg>
                <div :class="['content',v.name==activeMarker?'active':'']">
                  <div class="before"></div>
                  <div class="c_c">
                    <div class="title">{{v.name}}</div>
                    <div class="detail">
                      <div class="text">更多</div>
                      <img class="arrow" src="/image/更多双箭头.png" >
                    </div>
                    <div class="currentEvents">
                        <div class="item" v-for="(v2,k2) in v.currentEvents" :key="k2" >
                          <img class="yuan" src="/image/黄色导读点.png" >
                          <div class="text">{{v2.title}}</div>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "WorldMap",
  data() {
    return {
      chart: null,
      activeMarker:"中国",
      chartData:[
        { name: "中国", value: [116.4074, 39.9042] , currentEvents:[{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'},{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'},{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'}]},
        { name: "美国", value: [-74.006, 40.7128] , currentEvents:[{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'},{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'},{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'}]},
        { name: "英国", value: [-0.1276, 51.5074] , currentEvents:[{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'},{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'},{title:'美国及其盟友在南海和台海频繁举行军事演习，中国则通',id:'55a48'}]},
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    changeMarker(name){
      this.activeMarker = name
    },
    async initChart() {
      this.chart = echarts.init(this.$refs.chart);
      // 加载世界地图 GeoJSON
      const worldJson = await fetch("/data/world.json").then((res) =>
        res.json()
      );
      // 注册地图
      echarts.registerMap("world", worldJson);
      // 配置地图
      const option = {
        backgroundColor: "transparent",
        geo: {
            map: "world",
            zoom: 1.2,
            show: true,
            roam: false,
            tooltip: { show: true },
            label: {
                emphasis: { show: true },
            },
            itemStyle: {
                normal: {
                show: "true",
                color: "rgb(33, 66, 114)", //地图背景色
                borderColor: "#36598a",
                //省市边界线
                },
                emphasis: {
                show: "true",
                color: "#BDC8D7", //悬浮背景}
                },
            },
        },
            series: [
                {
                    name: "自定义标注",
                    type: "scatter",
                    coordinateSystem: "geo",
                    zlevel: 2,
                    data: this.chartData,
                    tooltip: {
                    show: true,
                    formatter: "{b}",
                    },
                    symbolSize: 10,
                    label: {
                        show: false,
                        formatter: "{b}", // 显示名称
                        position: "right",
                        color: "#fff",
                    },
                    itemStyle: {
                        color: "#ff5722", // 标注点颜色
                    },
                },
            ],
      };

      this.chart.setOption(option);
      // 窗口大小变化时，自动调整图表大小
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener("resize", this.chart.resize);
  },
};

</script>

<style lang="less" scoped>
.chart {
    // background-color: #0a2449;
    position: relative;
    width: 1040px; 
    height: 510px;
    .back{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -10;
    }
    .marker{
        // opacity: 0.5;
        position: absolute;
        left: 1034px;
        top: 205px;
        .one{
            position: absolute;
            left: 0;
            z-index: 9;
            top: 0;
            transform: translateX(-50%) translateY(-50%);
            // border: 0px dashed #fdbd00;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            display: flex;
            &.active{
                border: 1px dashed #fdbd00;
            }
            .two{
                width: 22px;
                height: 22px;
                background: #fcbc00 ;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                .three{
                    width: 12px;
                    height: 12px;
                    background: #5f6148;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                }
            }
        }
        svg{
          display: none;
          &.active{
            display: block;
          }
        }
        .content{
          display: none;
          color: #ffffff;
          width: 200px;
          height: 200px;
          // background: #fcbc00;
          position: absolute;
          left: 100px;
          top: -60px;
          z-index: 10;
          &.active{
            display: block;
          }
          .before{
            width: 2px;
            height: 32px;
            background: #FDBD00;
            position: absolute;
            left: 0;
            top: 16px;
          }
          .c_c{
            width: 198px;
            height: 100%;
            position: absolute;
            left: 2px;
            top: 0;
            background: rgba(179,134,0,0.30);
            .title{
              height: 45px;
              line-height: 45px;
              width: 100%;
              padding-left: 16px;
              font-size: 16px;
              font-weight: 500;
              background: rgba(12,10,0,0.80);
              box-sizing: border-box;
            }
            .detail{
              color: #FDBD00 ;
              font-size: 14px;
              font-weight: 400;
              position: absolute;
              right: 16px;
              top: 12px;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              .text{

              }
              .arrow{
                display: block;
                margin-left: 5px;
              }
              
            }
            .currentEvents{
              padding: 10px 14px;
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0;
              line-height: 24px;
              position: relative;
              .item{
                width: 166px;
                height: 30px;
                line-height: 30px;
                position: relative;
                cursor: pointer;
                .yuan{
                  position: absolute;
                  display: block;
                  left: 0;
                  top: 5px;
                  width: 20px;
                  height: 20px;

                }
                .text{
                  width: 144px;
                  height: 30px;
                  position: absolute;
                  left: 22px;
                  top: 0px;
                  white-space: nowrap;      /* 禁止换行 */
                  overflow: hidden;         /* 隐藏溢出内容 */
                  text-overflow: ellipsis; 
                  font-size: 14px;
                  color: #FFFFFF;
                  letter-spacing: 0;
                  font-weight: 400;
                }
              }
            }

          }
        }
    }
}


</style>



